<template>
    <section class="RoleSetPowers_container">
        <el-dialog title="设置权限" :visible.sync="isShow" width="42%">
            <p class="description">
                请为
                <span class="role-name">{{ role.name }}</span>
                设置权限, 勾选后保存。
            </p>

            <div class="content">
                <power showCheckbox ref="power" :selectedPowers="selectedPowers" />
            </div>

            <span slot="footer" class="footer">
                <el-button type="primary" :loading="loading" size="medium" @click="save"
                    >保存</el-button
                >
                <el-button size="medium" plain @click="isShow = false">取消</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
import Power from "../Power/Power.vue";
import _api from "@/common/api/role";

export default {
    components: { Power },
    data() {
        return {
            loading: false,
            isShow: false,
            role: {
                name: "未知角色",
            },
            selectedPowers: [],
        };
    },
    methods: {
        showDialog(role) {
            this.isShow = true;
            this.role = role;
            this.getSelectedPowers();
        },

        async save() {
            const powers = this.$refs.power.getSelectedPowers();
            const ids = powers.map((p) => p.id);
            await _api.setPowersAsync(this.role.id, ids);
            this.$message.success("设置权限成功");
            this.isShow = false;
        },

        async getSelectedPowers() {
            const result = await _api.getPowersAsync(this.role.id);
            this.selectedPowers = result.data.filter(
                (d) => d.parent_id != 0 && d.is_menu == "False"
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.RoleSetPowers_container {
    .content {
        height: 500px;
        overflow: auto;
    }

    .description {
        font-size: 1rem;
        margin-bottom: 20px;
        color: #999;

        .role-name {
            font-weight: bold;
            color: #409eff;
            font-size: 1.2rem;
        }
    }

    .footer {
        margin-top: 50px;
        display: flex;
        justify-content: flex-end;
    }
}
</style>
